<template>
  <g>
    <g class="pane-cell pane-link" @contextmenu.prevent="contextNode($event, item)">
      <path class="connector-wrap" :d="`M ${pos.startS} Q ${pos.curveS}  T ${pos.endS}`"></path>
      <path class="connector" :d="`M ${pos.startS} Q ${pos.curveS}  T ${pos.endS}`"></path>
      <path class="source-marker"></path>
      <path class="target-marker"></path>
      <path
        v-if="!item.endNode"
        class="target-marker"
        d="M 5 0 L 0 3.6327126400268037 L 5 7.265425280053607 Z"
        :transform="`translate(${item.endPosX - 4},${item.endPosY + 3}) scale(1,1) rotate(-90)`"
      ></path>
      <text class="comment" y transform></text>
    </g>
  </g>
</template>

<script>
export default {
  data: function () {
    return {};
  },
  props: ['item', 'startPosition'],
  methods: {
    // 右键行为
    contextNode (e, item) {
      this.$emit('coverShow', { e, item });
    }
  },
  computed: {
    pos () {
      const sizeX = 0;
      const sizeY = 40;
      const endData = { x: this.item.endPosX, y: this.item.endPosY + 5 };

      let startPosX = this.item.startPosX;
      let startPosY = this.item.startPosY;

      // 起始点
      let startS = `${startPosX + sizeX} ${startPosY + sizeY}`;

      // 二次贝尔曲线
      let curveS = `${startPosX + sizeX} ${startPosY + sizeY + 40} ${
        this.item.endNode
          ? (startPosX + endData.x + 2 * sizeX) / 2
          : (startPosX + endData.x + sizeX) / 2
      } ${(startPosY + endData.y + 20) / 2}`;

      // 终点
      let endS = `${this.item.endNode ? endData.x + sizeX : endData.x} ${
        endData.y
      }`;

      return {
        endData,
        startS,
        curveS,
        endS
      };
    }
  }
};
</script>

<style scoped lang="less" rel="stylesheet/less">
.connector {
  fill: none;
  stroke: #289de9;
  stroke-width: 1px;
  cursor: default;

  &:hover {
    stroke: hsla(0, 0%, 50%, 0.6);
    stroke-width: 4px;
  }
}

.connector-wrap {
  fill: none;
  stroke: hsla(0, 0%, 100%, 0);
  stroke-width: 15px;
}

.target-marker {
  fill: gray;
  stroke: gray;
  stroke-width: 1px;
}
</style>
